<template>
	<!-- 未读消息 -->
	<view class="my-apply">
		<picker :range="pickerRange" @change="bindPickerChange" :disabled="pickerDisabled">
			<view class="tab-posi">
				<NewSegmentedControl :current="current" :values="items" style-type="text" active-color="#198a6c"
					@clickItem="onClickItem" />
			</view>
		</picker>
		<view class="content">
			<view class="card" v-for="item in myApplyList" :key="item.noticeId" @click="toDetail(item)">
				<view class="head">
					<view>{{ item.sysModuleCh }}</view>
					<view :class="{'read-flag':item.statusCh=='未读'}" style="font-size: 12px;">
						{{item.statusCh}}
					</view>
				</view>
				<view class="list">
					<view>
						<view>
							消息类型：<text class="status">{{ item.noticeTypeCh }}</text>
						</view>
						<text class="date">{{ item.generateTime }}</text>
					</view>
					<view>
						<view class="message-content">消息内容：{{ item.noticeContent }}</view>
						<text class="iconfont icon-jinrujiantouxiao" v-if="item.sysModule !== 2"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载结束 -->
		<view class="uni-loadmore" v-if="showLoadMore">{{ loadMoreText }}</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from "vue";
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getAllEnum,
		unReadList,
		getAssetId,
		readPost
	} from "@/common/api/myApply";
	import {
		CONSTANT
	} from "@/common/config/config.ts";
	import {
		fromSearch
	} from "@/common/util/tabSearchUse.ts";

	const current = ref(0);
	const items = ref(["消息分类", "消息状态"]);
	const pickerRange = ref();
	const pickerDisabled = ref(false);
	const currentTab = ref(0);
	const myApplyList = ref([]);
	const category = ref([]);
	const status = ref([]);
	const page = ref(CONSTANT.initPage);
	const rows = ref(CONSTANT.pageSize);
	const allPages = ref(0);
	const showLoadMore = ref(false);
	const loadMoreText = ref("加载中...");
	const searchParams = ref({
		noticeType: "",
		status: "",
	});
	const matchRule = {
		noticeType: "eq",
		status: "eq",
	};
	interface EnumType {
		label: string;
		value: string;
	}

	const getApplyList = () => {
		const params = Object.assign(fromSearch(searchParams.value, matchRule), {
			page: page.value,
			rows: rows.value,
		});
		loadMoreText.value = '加载中...'
		unReadList(params).then((res: any) => {
			uni.stopPullDownRefresh();
			if (res.code == 0) {
				allPages.value = res.data.pages;
				page.value = res.data.current;
				myApplyList.value = res.data.records;

				myApplyList.value.forEach((item: any) => {
					item.generateTime = item.generateTime.replace("T", " ");
				});
				if (myApplyList.value.length === 0) {
					showLoadMore.value = true;
					loadMoreText.value = "暂无数据";
				} else if (myApplyList.value.length < CONSTANT.pageSize) {
					showLoadMore.value = true;
					loadMoreText.value = "没有更多的数据了";
				} else {
					showLoadMore.value = false;
				}
			} else {
				uni.showToast({
					icon: "none",
					title: res.message,
				});
			}
		});
	};
	getApplyList();
	const getApplyAddr = () => {
		getAllEnum("*").then((res: any) => {
			if (res.code == 0) {
				category.value = res.data["NoticeType"].map((item: any) => {
					return {
						label: item.value,
						value: item.code
					};
				});
				status.value = res.data["NoticeStatus"].map((item: any) => {
					return {
						label: item.value,
						value: item.code
					};
				});
			}
		});
	};
	getApplyAddr();
	const onClickItem = (e: {
		currentIndex: number
	}) => {
		page.value = CONSTANT.initPage;
		currentTab.value = e.currentIndex;
		switch (e.currentIndex) {
			case 0:
				pickerRange.value = category.value.map((item: EnumType) => item.label);
				pickerRange.value.push('全部')
				break;
			case 1:
				pickerRange.value = status.value.map((item: EnumType) => item.label);
				pickerRange.value.push('全部')
				break;
		}
	};
	const bindPickerChange = (e: any) => {
		let len = pickerRange.value.length - 1
		myApplyList.value = [];
		if (currentTab.value == 0) {
			if (e.detail.value == len) {
				items.value[0] = '消息分类'
				searchParams.value.noticeType = ''
			} else {
				items.value[0] = pickerRange.value[e.detail.value];
				searchParams.value.noticeType = (
					category.value[e.detail.value] as EnumType
				).value;
			}

		} else {
			if (e.detail.value == len) {
				items.value[1] = '消息状态'
				searchParams.value.status = ''
			} else {
				items.value[1] = pickerRange.value[e.detail.value];
				searchParams.value.status = (
					status.value[e.detail.value] as EnumType
				).value;
			}

		}
		getApplyList();
	};
	const toDetail = (item: any) => {
		readPost({
			"msgGroupIdList": [
				item.msgGroupId
			]
		}).then(res => {
			if (res.code == 0) {
				getApplyList()
			}
		})


		switch (item.sysModuleCh) {
			case "资产申请":
				getAssetId(item.businessId).then((res: any) => {
					if (res.code == 0) {
						switch (item.noticeSubType / 1) {
							case 1:
								uni.navigateTo({
									url: '/pages/assets/assetReceive/applyDetList?assetApplyId=' + item
										.businessId, //领用
								});
								break;
							case 2:
							case 3:
							case 4:
								uni.navigateTo({
									url: `/pages/assets/assetManage/index?assetId=${res.data}`, //报修、报废、退还
								});
								break;
						}
					}
				})
				break;
			case "巡检管理":
				uni.setStorageSync('inspectDetailParams', item.noticeParam)
				uni.navigateTo({
					url: `/pages/ipqc/inspectDetail/index?rowData=${JSON.stringify(
          item.noticeParam
        )}`,
				});
				break;
		}
	};
	onPullDownRefresh(() => {
		page.value = CONSTANT.initPage;
		myApplyList.value = [];
		getApplyList();
	});
	onReachBottom(() => {
		if (page.value > allPages.value || page.value == allPages.value) {
			loadMoreText.value = "没有更多的数据了";
			showLoadMore.value = true;
		} else {
			page.value++;
			loadMoreText.value = "加载中……";
			showLoadMore.value = true;
			getApplyList();
		}
	});
</script>

<style scoped lang="scss">
	.list {
		font-size: 14px;

		.icon-jinrujiantouxiao {
			top: 50%;
		}

		&>view {
			line-height: 80rpx;

			&:first-child {
				display: flex;
				justify-content: space-between;
				padding: 0;
				font-size: 14px;

				.status {
					color: #008d6a;
					font-weight: 600;
				}

				.date {
					color: #969494;
				}
			}

			&:last-child {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.message-content {
					width: 90%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.read-flag {
		color: #f00;
	}
</style>
